<template>
	<div class="login-container">
		<video class="video" muted src="../../assets/video/bg-video.mp4" loop="loop" autoplay="true"></video>
		<div class="bg2"></div>
		<!-- 常规登入 -->
		<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
			class="login-loginForm">
			<h1 class="title" v-text="title"></h1>
			<!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->

			<i :class="['jiaobiao', 'iconfont', jiaobiao]"></i>
			<!-- 切换二维码登入的控制条件isErweiLogin -->
			<!-- 常规登入 -->
			<div class="common-login">
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="验证码" prop="captcha">
					<el-input maxlength="5" v-model="loginForm.captcha" class="captcha" ref="captcha"
						@keydown.native.enter="submitForm('loginForm')"></el-input>
					<span class="captcha-svg">
						<i></i>
					</span>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
				</el-form-item>
				<!-- 手机登入图标按钮 -->
				<el-form-item>
					<div class="sms">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-iphone"></use>
						</svg>
						<a href="javascript:;" @click="isSmsLogin = true"
							style="color: #fff; font-size: 16px">切换短信登入</a>
					</div>
				</el-form-item>
			</div>

			<!-- 二维码登入 -->
			<div class="erwei">
				<div class="img">
					<img width="200px" alt="" />
					<i class="mask"> </i>
				</div>
				<p>
					<svg aria-hidden="true" class="icon-wx">
						<use xlink:href="#icon-weixin"></use>
					</svg>
					<b>扫描二维码</b>
				</p>
			</div>
			<!-- 短信验证码登入 -->
			<div class="smsContainer">
				<el-form-item label="手机号">
					<el-input maxlength="11" class="captcha phone"></el-input>
					<span class="captcha-svg" style="color: #888; line-height: 45px; text-decoration: underline">
					</span>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary">提交</el-button>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script>
//引入api中的方法
import * as api from "@/api/users";
//引入socket.io
import socketIo from "socket.io-client";
//引入生成二维码的插件qrcode
import qr from "qrcode";
//引入扫码成功和失效的图片
import scancodeSuccessPic from "../../assets/img/scancode.png";
import invalidPic from "../../assets/img/invalidQr.png";
//映射vuex
import { mapMutations } from "vuex";
var validateCaptcha = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length !== 5) {
		callback("验证码必须是5位");
	} else {
		callback();
	}
};
var validateUsername = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	var reg = /^\w{3,12}$/;

	if (reg.test(value)) {
		//验证通过
		callback();
	} else {
		callback("用户名可以是字母数字下划线,3-12位");
	}
};
var validatePass = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length < 3) {
		callback("密码长度不能小于3位");
	} else {
		callback();
	}
};

export default {
	name: "login",
	data() {
		return {
			loginForm: {
				//登入输入框的数据
				username: "",
				password: "",
				captcha: "",
			},
			rules: {
				//表单验证规则
				username: [{ validator: validateUsername, trigger: "blur" }],
				password: [{ validator: validatePass, trigger: "blur" }],
				captcha: [{ validator: validateCaptcha, trigger: "blur" }],
			}
		};
	},
	//计算属性

	methods: {
		//映射vuex的mutation
		...mapMutations(["SET_USERINFO"]),

		//常规登入
		submitForm(formName) {
			//登入逻辑

			//1.先要进行本地的表单校验

			//2.表单校验通过之后 通过v-model获取输入的username password

			//3.校验验证码

			//4.校验通过之后 发起请求 请求登入接口 传入用户名和密码

			//5.跳转到主页,显示主页
			//fromName是表单的ref名字
			// console.log(this.$refs);
			this.$refs[formName].validate((valid) => {

			})
		}
	}
};
</script>
<style scoped lang="less">
//样式设置不上的情况,解决方案
//1.检查类名是否正确
//2.检查权重是否正确
//3.检查是否需要穿透
.icon-wx {
	width: 25px !important;
	height: 25px !important;
	vertical-align: -7px;
	margin-right: 3px;
}

.login-container {
	text-align: center;
	color: #fff;

	.common-login {
		padding-right: 50px;
	}

	//二维码样式
	.erwei .img {
		display: inline-block;
		position: relative;
		width: 200px;
		height: 200px;

		img {
			position: absolute;
			left: 0;
		}

		.mask {
			width: 100%;
			height: 100%;
			opacity: 0.8;
			background-color: #fff;
			position: absolute;
			left: 0;
			// background-image: url("../../assets/img/scancode.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
	}

	.jiaobiao {
		font-size: 60px;
		color: #fff;
		position: absolute;
		right: -1px;
		top: -1px;
		cursor: pointer;
		opacity: 0.7;
	}

	.video {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bg2 {
		background-image: url("../../assets/img/bg2.png");
		background-repeat: no-repeat;
		position: fixed;
		width: 20%;
		height: 40%;
		background-size: 100% 100%;
		left: 20%;
		top: 40%;
		opacity: 0.5;
	}

	.el-form {
		position: fixed;
		right: 10%;
		top: 25%;
		border-radius: 5px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 100px 0 50px 0;

		/deep/ .el-input__inner {
			width: 250px;
		}

		/deep/ .el-button--primary {
			background: linear-gradient(90deg, #1596fb, #002dff);
			width: 250px;
		}

		/deep/ .el-form-item__label {
			color: #fff;
		}

		.title {
			margin: 0 0 60px 0;
			text-align: center;
			color: #fff;
		}

		/deep/ .captcha {
			width: 100px;
			vertical-align: top;

			.el-input__inner {
				width: 100%;
				height: 45px;
				border-radius: 5px 0 0 5px;
				border: 0;
				font-size: 18px;
			}
		}

		svg path {
			stroke: red;
		}

		.captcha-svg {
			background: #fff;
			display: inline-block;
			height: 45px;
			width: 150px;
			text-align: center;
			cursor: pointer;
			border: 0;
			border-radius: 0px 5px 5px 0;
		}

		.el-form-item__content {
			margin-left: 30px !important;
			width: 250px !important;
		}
	}
}

.sms {
	margin-left: -15px !important;
	width: 250px !important;
}

.smsContainer {
	padding-right: 20px !important;
	width: 89%;

	/deep/ .el-form-item__label {
		// margin-left: 80px !important
		padding: 0 !important;
		padding-right: 10px !important;
	}

	/deep/ .phone {
		width: 140px !important;
	}

	/deep/ .captcha-svg {
		width: 115px !important;
	}

	/deep/ .el-form-item__content {
		margin: 0;
	}
}

// .smsContainer{
// 	width:300px;
// }
</style>
